<template>
  <div class="btn-container">
    <el-tooltip effect="dark" content="返回起始点" placement="left">
      <el-button icon="el-icon-aim" @click="goBack"></el-button>
    </el-tooltip>
    <br />

    <el-tooltip effect="dark" content="矢量 / 影像" placement="left">
      <el-button
        icon="el-icon-picture-outline-round"
        @click="changeBaseMap"
      ></el-button>
    </el-tooltip>
    <br />

    <el-tooltip effect="dark" content="放大" placement="left">
      <el-button icon="el-icon-plus" @click="zoomIn"></el-button>
    </el-tooltip>
    <el-tooltip effect="dark" content="缩小" placement="left">
      <el-button icon="el-icon-minus" @click="zoomOut"></el-button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: ["map"],

  data() {
    return {
      baseMap: null,
      view: null,
    };
  },

  methods: {
    zoomIn() {
      // 放大
      this.view.setZoom(this.getViewZoom() + 1);
    },
    zoomOut() {
      // 缩小
      this.view.setZoom(this.getViewZoom() - 1);
    },
    getViewZoom() {
      // 当前zoom
      return this.view.getZoom();
    },

    changeBaseMap() {
      // 底图切换
      let layersGroup = this.baseMap.getAllLayers();
      layersGroup.forEach((v, i) => {
        if (i < 4) {
          v.setVisible(!v.getVisible());
        }
      });
    },

    goBack() {
      // 回中心
      this.view.setCenter([118.13, 24.49]);
      this.view.setZoom(13);
    },
  },

  watch: {
    map() {
      this.baseMap = this.map;
      this.view = this.baseMap.getView();
    },
  },
};
</script>

<style scoped>
.btn-container {
  display: flex;
  flex-direction: column;
}
.el-button + .el-button {
  margin: 0;
}
.el-button,
.el-button.is-round {
  padding: 10px;
}
</style>